import React, { useMemo } from 'react';

import {
  ProFormSelect,
  ProFormText,
  ProFormDigit,
  ProFormRadio,
} from '@ant-design/pro-form';
import { Modal } from 'antd';
import {ProForm} from '@ant-design/pro-form';
import type { TableListItem } from './data';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<TableListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
};

const UpdateForm: React.FC<UpdateFormProps & {onVisibleChange: any}> = (props) => {
  console.log('props', props.values);
  const Form = () => useMemo(() => (
    <ProForm
    initialValues={props.values}
    onFinish={props.onSubmit}
  >
  <ProFormText
    label="角色ID"
    rules={[{required: true,message: '必填项',},]}
    width="md"
    name="roleId"
    disabled
    
  />
  <ProFormText
    label="角色名称"
    rules={[{required: true,message: '必填项',},]}
    width="md"
    name="roleName"
  />

  <ProFormText
    label="角色权限字符串"
    rules={[{required: true,message: '必填项',},]}
    width="md"
    name="roleKey"
  />
  <ProFormSelect
    label="数据范围"
    width="md"
    name="dataScope"
    rules={[{required: true,message: '必填项',},]}
    valueEnum={{
      1: '全部数据权限',
      2: '自定数据权限',
      3: '本部门数据权限',
      4: '本部门及以下数据权限',
    }}
  />
  <ProFormRadio.Group
    name="status"
    label="Radio.Group"
    rules={[{required: true,message: '必填项',},]}
    options={[
      {
        label: '正常',
        value: 0,
      },
      {
        label: '停用',
        value: 1,
      },

    ]}
  />
  <ProFormDigit 
    label="显示顺序" 
    name="roleSort"  
    rules={[{required: true,message: '必填项',},]}
    min={0} max={10} 
  />
  <ProFormText
    label="角色备注"
    rules={[{required: true,message: '必填项',},]}
    width="md"
    name="remark"
  />
  </ProForm>
  ), [props.values.roleId])
  return (
    <Modal
    width={640}
    title="修改角色"
    open={props.updateModalVisible}
    onCancel={() => {
      props.onCancel();
    }}
    footer={null}
  >
    <Form />
  </Modal>
  )
}

export default UpdateForm;
